///
/// Big Picture by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	html {
		height: 100%;
	}

	// Set box model to border-box.
	// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
		html {
			box-sizing: border-box;
		}

		*, *:before, *:after {
			box-sizing: inherit;
		}

	body {
		background: _palette(bg);
		height: 100%;
		min-width: 320px;

		// Stops initial animations until page loads.
			&.is-preload {
				*, *:before, *:after {
					@include vendor('animation', 'none !important');
					@include vendor('transition', 'none !important');
				}
			}

	}

/* Spinner */

	@include keyframes('spinner-rotate') {
		0% { @include vendor('transform', 'scale(1) rotate(0deg)'); }
		100% { @include vendor('transform', 'scale(1) rotate(360deg)'); }
	}

/* Loader */

	@include keyframes('spinner-show') {
		0% { opacity: 0; }
		100% { opacity: 1; }
	}

	@include keyframes('spinner-hide') {
		0% {
			@include vendor('transform', 'scale(1) rotate(0deg)');
			color: _palette(border);
			z-index: 100001;
		}

		99% {
			@include vendor('transform', 'scale(0.5) rotate(360deg)');
			color: _palette(border);
			z-index: 100001;
		}

		100% {
			@include vendor('transform', 'scale(0.5) rotate(360deg)');
			color: _palette(border);
			z-index: -1;
		}
	}

	@include keyframes('overlay-hide') {
		0% {
			opacity: 1;
			z-index: 100000;
		}

		15% {
			opacity: 1;
			z-index: 100000;
		}

		99% {
			opacity: 0;
			z-index: 100000;
		}

		100% {
			opacity: 0;
			z-index: -1;
		}
	}

	body {
		text-decoration: none;

		&:before {
			@include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-hide 0.25s ease-in-out forwards !important'));
			@include vendor('transform-origin', '50% 50%');
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
			color: _palette(border);
			content: '\f1ce';
			cursor: default;
			display: block;
			font-size: 2em;
			height: 2em;
			left: 50%;
			line-height: 2em;
			margin: -1em 0 0 -1em;
			opacity: 0;
			position: fixed;
			text-align: center;
			top: 50%;
			width: 2em;
			z-index: -1;
		}

		&:after {
			@include vendor('animation', 'overlay-hide 1.5s ease-in forwards !important');
			background: #ffffff;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: -1;
		}

		&.is-preload {
			&:before {
				@include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-rotate 0.75s infinite linear !important'));
				z-index: 100001;
			}

			&:after {
				@include vendor('animation', 'none !important');
				opacity: 1;
				z-index: 100000;
			}
		}
	}

	@media (-webkit-min-device-pixel-ratio: 2) {
		body:before {
			line-height: 2.025em;
		}
	}